<script setup>
import UserInfo from '@/components/UserInfo.vue'
import { computed } from 'vue'

const props = defineProps({
  recharge: {
    type: Object
  }
})

const status = computed(() => {
  return props.recharge.status === 1 ? '已支付' : '未支付'
})
</script>

<template>
  <div class="recharge-item">
    <UserInfo
      :id="recharge.user_id"
      :nickname="recharge.nickname"
      :avatar="recharge.avatar"
    ></UserInfo>
    <span style="flex: 1"></span>
    <div class="recharge-info">
      <div class="recharge-amount" :style="{ color: status === '未支付' ? 'red' : 'orange' }">
        {{ status }}
        {{ recharge.amount }}
      </div>
      <div>{{ recharge.created_at }}</div>
    </div>
  </div>
</template>

<style scoped lang="less">
.recharge-item {
  padding: 10px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;

  .recharge-info {
    text-align: center;
    margin-left: 10px;
    font-size: 12px;

    .recharge-amount {
      font-size: 15px;
      font-weight: bold;
      color: orange;
    }
  }
}
</style>
